<!DOCTYPE html>
<meta charset="utf-8">
<title>Disabled checkbox event handling</title>
<link rel="author" title="jeffcarp" href="mailto:gcarpenterv@gmail.com">
<link rel=help href="https://html.spec.whatwg.org/#enabling-and-disabling-form-controls:-the-disabled-attribute">

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<body>
<script>
"use strict";

test(() => {
  const input = document.createElement("input");
  input.type = "checkbox";
  input.disabled = true;
  document.body.appendChild(input);
  const events = [];

  input.addEventListener("change", () => {
    events.push("change");
  });
  input.addEventListener("click", () => {
    events.push("click");
  });
  input.addEventListener("input", () => {
    events.push("input");
  });

  // disabled checkbox begins unchecked
  assert_false(input.checked);

  input.click();

  // disabled checkbox still unchecked after .click()
  assert_false(input.checked);
  // disabled checkbox emits no events after synthetic .click()
  assert_array_equals(events, []);

  input.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));

  // disabled checkbox is checked after dispatching direct click event (spec violation; "default action" for events)
  assert_true(input.checked);
  // disabled checkbox does not run click activation events after click happens
  assert_array_equals(events, ["click"]);

}, "checkbox input respects disabled attribute for synthetic events but not for dispatchEvent");
</script>
</body>
